<script setup>
const backgroundColor = true;
const borderRadius = ['border-radius', 'padding-10'];
const { size, author, fontSize } = defineProps({
  size: {
    type: String,
    default: 'medium' // 默认值为 'medium'
  },
  author : {
    type: Object,
    default: {
      title: '',
      name: '',
      publishedAt: ''
    }, // 默认值为 'Vue'
  },
  fontSize: {
    type: Number,
    default: 1
  },
});

const fontSizeRef = ref(fontSize);

//对象是按照引用传递的，如果按照javascript对象设置，会导致更新子组件的数据会改变父组件的数据
// const myAuthor = reactive(author);
const mySize = ref(size);
const { title, name, publishedAt } = author;

const myAuthor = reactive({ title, name, publishedAt });

const emit = defineEmits({
  enlargeText : null,
  change : null,
  //在父组件中定义的click事件如果在defineEmits中定义，那么子组件中定义的click事件将不会被触发
  // 透传的 attribute 不会包含子组件上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数，换句话说，声明过的 props 和侦听函数被子组件“消费”了。
  submit : ({size, author, fontSize}) => {
    console.log(size, author, fontSize);
    return true;
  },
});

const changeSize = (n) => {
  emit('enlarge-text', n);
};

const handleChange = () => {
  if ( fontSizeRef.value < 1 ) {
    fontSizeRef.value = 1;
  }
  emit('change', fontSizeRef.value);
};

const handleSubmit = () => {
  emit('submit', {
    size: mySize.value,
    author: myAuthor,
    fontSize: fontSizeRef.value
  });
};

const countModel = defineModel('value');
const increment = () => {
  countModel.value++;
};
const [model, modifiers] = defineModel('text');
if ( modifiers.capitalize ) {
  // model.value =  model.value.charAt(0).toUpperCase() + value.slice(1);
  model.value = model.value.charAt(0).toUpperCase() + model.value.slice(1);
}

// 透传
defineOptions( {
  inheritAttrs: false
});

const attrs = useAttrs();
// console.log(attrs);
watch(() => size, (newValue) => {
  console.log(newValue);
});
</script >

<template >
  <div class="padding-10">
    <AButton type="primary" @click="changeSize(1)">文本放大</AButton>
    <AButton type="primary" @click="changeSize(-1)">文本缩小</AButton>
    
    <slot name="title" :title="'标题1'" message="消息"></slot >
    
    <div :class="['white', {'background-blue': backgroundColor}, [borderRadius]]" >
      <slot name="content" ></slot >
    </div >
    
    <slot name="footer" ></slot >
    
    <AInputGroup>
      <AInput v-model:value="mySize" placeholder="Basic usage"/>
    </AInputGroup>
    <p >mySize：{{ mySize }}</p >
    <ARow :gutter="8">
      <ACol span="6">
        title: {{ author.title }}
      </ACol>
      <ACol span="6">
        <AInput v-model:value="myAuthor.title" placeholder="Basic usage" />
      </ACol>
    </ARow>
    
    <ARow :gutter="8">
      <ACol span="6">
        <AInputNumber v-model:value="fontSizeRef" placeholder="Basic usage" @change="handleChange" :min="1" :max="5"/>
      </ACol>
      <ACol span="6">
        <AButton type="primary" @click="handleSubmit">submit</AButton>
      </ACol>
      <ACol span="6">
        <AButton type="primary" @click="increment">increment</AButton>
        <p >count: {{ countModel }}</p >
      </ACol>
    </ARow>
    
    <ARow :gutter="8">
      <ACol span="6">
        <input v-model="model" type="text">
      </ACol>
    </ARow>
    <div v-bind:class="$attrs['class']">
      // 透传的 attribute不包含透传的事件函数
    </div>
    <div>
      {{ $attrs.onClick }}
    </div>
    
    
    
  </div>
</template >

<style scoped >
.white {
  color: #FFFFFF;
}

.background-blue {
  background-color: blue;
}

.border-radius {
  border-radius: 10px;
}
.padding-10 {
  padding: 10px;
}
.border-gray {
  border: 1px solid deeppink;
}
</style >